<template>
	<view class="parts-row">
		<uni-row class="parts-row" :gutter="30">
			<uni-col :span="12" v-for="(x,i) in state.list">
				<view class="parts">
					<image class="image" mode="aspectFit"   :src="x.partImage" />
					<view class="text" >{{ x.partName }}</view>
				</view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script setup>
import { onMounted,reactive } from 'vue'
	const state = reactive({
		list:[]
	})
	function init(){
		uni.request({
			url: "part/list",
			method: "POST",
			data: {
				pageNum:1,
				pageSize:10,
			},
			success: (res) => {
				console.log(res);
		       state.list = res.data.list;
			}
		})
	}
	
	onMounted(()=>{
		init()
	})
	
</script>

<style scoped lang="less">
	.parts-row{
		padding:0 20rpx;
		background: #f8f8f9;
		.parts{
			padding: 10rpx;
			margin: 20rpx 0;
			background: #fff;
			.image{
				width:300rpx;
				height: 200rpx;
			}
			.text{
				text-align: center;
				font-size: 30rpx;
				padding: 20rpx 0;
			}
		}
	}
</style>